<template>
  <div class="header-container">
    <div class="user-info">
      <el-avatar class="user-avatar" shape="square" :src="DefaultUserAvatar"/>
      <div style="display: flex;flex-direction: column;justify-content: center">
        <span class="user-account-text">{{userInfo.account}}</span>
        <div>
          <span class="plus-logo">PLUS</span>
        </div>
      </div>
    </div>
    <!-- 最近联系人搜索框 -->
    <el-input v-model="searchKey" size="small" class="search" placeholder="搜索最近联系人"  @input="handleSearch">
      <template #prefix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import DefaultUserAvatar from "@/assets/img/default-user-avatar.png"
import {reactive, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
/**
 * 用户信息
 * account:用户名
 * isPlus:是否会员
 */
const userInfo = reactive({
  account: "jd zxcvbmmnkscx",
  isPlus: false
})
const searchKey = ref('');

const emits = defineEmits(['search']); // 定义可以触发的事件

const handleSearch = () => {
  console.log(searchKey.value);
  // 触发自定义事件，将搜索关键字传递给父组件
  emits('search', searchKey.value);
};
</script>


<style scoped>
.header-container {
  background-color: #E74648;
  height: 104px;
  padding: 10px;
}
.user-info{
  display: flex;
}
.user-account-text{
  font-size: 18px;
  color: white;
}
.plus-logo{
  background-color: lightgray;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 4px;
  height: 20px;
}
.user-avatar{
  width: 50px;
  height:50px;
  margin-right: 8px;
}
.search{
  border: none;
  margin-top: 8px;
}
</style>
